<template>
    <view class="index">
        <view class="tabs">
            <tian-tabs :list="list1" @click="click" lineColor="red"
                :activeTextStyle="{ color: 'red', fontWeight: '500' }" :scrollable="false"></tian-tabs>
            <tian-tabs :list="list2" @click="click" lineColor="red"
                :activeTextStyle="{ color: 'red', fontWeight: '500' }"></tian-tabs>
            <tian-tabs :list="list1" @click="click"></tian-tabs>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: '全部',
                }, {
                    name: '待处理',
                }, {
                    name: '已完成'
                }, {
                    name: '已取消',
                }],
                list2: [ // 标签数据源
                    {
                        name: '推荐',
                        badge: {
                            value: 5
                        }
                    }, // 带数字徽章
                    {
                        name: '热点',
                        badge: {
                            isDot: true
                        }
                    }, // 带红点徽章
                    {
                        name: '财经',
                        badge: {
                            value: 102,
                            max: 99,
                            type: 'warning'
                        }
                    }, // 数字超出显示 99+
                    {
                        name: '科技',
                        disabled: true
                    }, // 禁用标签
                    {
                        name: '体育',
                        badge: {
                            value: 0,
                            showZero: true,
                            type: 'success'
                        }
                    }, // 显示 0 值
                    {
                        name: '体育',
                        badge: {
                            value: 0,
                            showZero: true,
                            type: 'success'
                        }
                    } // 显示 0 值
                ]

            }
        },
        methods: {
            click(res) {
                console.log(res)
            },
        }
    }
</script>
<style>
</style>

<style lang="scss">
    .index {
        width: 100%;

        .tabs {}
    }
</style>